<template>
  <div>
    <van-nav-bar
      :left-text="getCurrentTime()"
      title="日期计算器"
      fixed
      placeholder
    /><br /><br />

    <!--输入开始时间-->
    <van-cell-group inset clearable class="input">
      <van-field
        v-model="begin"
        label="开始"
        placeholder="请输入开始时间..."
      /> </van-cell-group
    ><br /><br />

    <!--输入结束时间-->
    <van-cell-group inset clearable class="input">
      <van-field
        v-model="end"
        label="结束"
        placeholder="请输入结束时间..."
      /> </van-cell-group
    ><br /><br />

    <el-button type="primary" @click="getDay">计算</el-button><br /><br />

    <!--显示模块-->
    <div class="xs1">
      <div style="height: 65px"></div>
      <div style="height: 15px; text-align: center">
        <a class="js"> {{ day1 }}</a
        ><a class="day">{{ day }}</a
        ><a class="js">{{ day2 }}</a>
      </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</template>
<script>
import { NavBar } from "vant";
import { Field, CellGroup } from "vant";
export default {
  //顶栏
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      date: new Date(), // 当前日期实例化
      day1: "", //存字符：相差
      day: "", //存计算结果
      day2: "", //存字符：天
      begin: "", //获取开始时间
      end: "", //获取结束时间
    };
  },
  created() {
    // 每0.1秒更新一次日期
    this.timer = setInterval(this.getTime, 100);
  },
  methods: {
    //当前日期
    getTime() {
      // 更新当前日期变量
      this.date = new Date();
    },

    // 左上角当前时间
    getCurrentTime() {
      const hm = this.date.getHours() >= 12 ? "PM" : "AM";
      return (
        this.date.getHours() +
        ":" +
        this.date.getMinutes() +
        ":" +
        this.date.getSeconds() +
        " " +
        hm
      );
    },

    // 计算开始日期和结束日期差几天
    getBeginTime(begin, end) {
      const day =
        (new Date(end).getTime() - new Date(begin).getTime()) /
        (24 * 60 * 60 * 1000);
      return parseInt(day);
    },

    // 计算模块
    getDay() {
      if (this.begin != "" && this.end != "") {
        // 传入日期， 第一个是开始时间，第二个是结束时间
        const days = this.getBeginTime(this.begin, this.end);
        var str;
        //输出绝对值
        if (days < 0) {
          str = -days;
        } else if (days == 0) {
          str = days;
        } else {
          str = days;
        }
        this.day1 = "相差：";
        this.day = str;
        this.day2 = "天";
      } else {
        this.$message({
          message: "请输入日期",
          type: "warning",
        });
      }
      console.log(str);
      console.log(this.begin);
      console.log(this.end);
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
};
</script>

<style scoped lang="less">
.input {
  width: 80%;
  margin: 0px auto;
}
.js {
  color: #519678;
  font-size: 25px;
}
.day {
  color: #287553;
  font-size: 50px;
}
.xs1 {
  width: 70%;
  height: 200px;
  background: url("../assets/custom/0.jpg");
  margin: 0 auto;
  border-radius: 30px;
}
</style>